import React,{useState,useEffect} from 'react';
import { EChartsOption } from 'echarts'
import { data_simpleData } from '../api/api'
import Echart from './index';

function Zhe(props) {
    var [lineList,setLine] = useState([])
    var [lineListY,setY] = useState([])
    useEffect(()=>{
      data_simpleData().then((res)=>{
        console.log(res.data);
        res.data.data.map((item)=>{
          lineList.push(item.x)
        })
        setLine([...lineList])
        res.data.data.map((item)=>{
          lineListY.push(item.val)
        })
        setY([...lineListY])
      })
    },[])
    const option = {
      title: {
        text: '销量数据趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['销量']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: lineList
        
      },
      yAxis: {
        type: 'value',
        
      },
      series: [
        {
          name: '销量',
          type: 'line',
          // stack: 'Total',
          data: lineListY
        },

       
      ]
}
    return (
        <Echart option={option}/>
    );
}

export default Zhe;